﻿var activeX = []
var activeY = []
var  trainCountX = []
var trainCountY = []
var fenxiFangshiX = []
var fenxiFangshiY = []
var fenxiGroupX = []
var fenxiGroupY = []
var hotX = []
var hotY = []
$(function () {
  echarts_1();
  echarts_2();
  echarts_4();
  echarts_31();
  echarts_5();
  function echarts_1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart1"));
    var  url = 'http://192.168.0.103:6002'
    $.ajax({
      url: url + '/api/daping/statistic/dashboard', // 替换为你的接口URL
      type: 'POST', // 或者 'POST'，取决于接口要求
      success: function (data) {
        // 假设返回的数据是数组，我们遍历它并添加到页面上的容器中
        data.response.hot.forEach(item=>{
          hotX.push(item.videoName)
          hotY.push(item.videoNum)
        })
        console.log(activeX)
        myChart.setOption({
          yAxis:[{
            data:hotX
          }],
          series: [{
            data: hotY
          }]
        })
      },
      error: function (xhr, status, error) {
        // 处理错误情况
        console.error("An error occurred: " + status + "\nError: " + error);
      }
    });
    option = {
      tooltip: {},
          legend: {
            show: false,
          },
          grid: {
            top: '-3%',
            left: '-17%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          yAxis: [
            {
              type: "category",
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisPointer: {
                label: {
                  show: false,
                  margin: 30,
                },
              },
              data: hotX,
              axisLabel: {
                margin: 110,
                fontSize: 14,
                align: "left",
                color: "rgba(255,255,255,0.85)",
                // 配置序号背景
                rich: {
                  a1: {
                    color: "#FFD743",
                    width: 20,
                    height: 30,
                    align: "center",
                  },
                  a2: {
                    color: "#4690FF",
                    width: 20,
                    height: 30,
                    align: "center",
                  },
                  a3: {
                    color: "#FF8A45",
                    width: 20,
                    height: 30,
                    align: "center",
                  },
                  b: {
                    color: "rgba(255,255,255,0.65)",
                    width: 20,
                    height: 30,
                    align: "center",
                  },
                },
                formatter: function (params, index) {
                  var leftIndex = index + 1;
                  if (leftIndex < 4) {
                    return ["{a" + leftIndex + "|" + leftIndex + "}" + "  "+params].join(
                      "\n"
                    );
                  } else {
                    return ["{b|" + leftIndex + "}" + "  " +params].join("\n");
                  }
                },
              },
            },
          ],
          series: [
            {
              zlevel: 2,
              type: "bar",
              barWidth: 10,
              data: hotY,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(27,46,204,0.80)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: " #41D7FF", // 100% 处的颜色
                    },
                  ],
                },
                barBorderRadius: [8, 8, 8, 8],
              },
              label: {
                show: true,
                position: "right",
                color: "rgba(255,255,255,0.85)",
                fontSize: 14,
                offset: [10, 1],
                formatter:function(params){
                  return params.value 
                }
              },
            },
          ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart2"));
    var  url = 'http://192.168.0.103:6002'
    $.ajax({
      url: url + '/api/daping/statistic/dashboard', // 替换为你的接口URL
      type: 'POST', // 或者 'POST'，取决于接口要求
      success: function (data) {
        // 假设返回的数据是数组，我们遍历它并添加到页面上的容器中
        data.response.trainCount.forEach(item=>{
          trainCountX.push(item.trainType)
          trainCountY.push(item.trainNum)
        })
        console.log(activeX)
        myChart.setOption({
          xAxis:[{
            data:trainCountX
          }],
          series: [{
            data: trainCountY
          }]
        })
      },
      error: function (xhr, status, error) {
        // 处理错误情况
        console.error("An error occurred: " + status + "\nError: " + error);
      }
    });
    option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: trainCountX,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid",
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate:50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          type: "bar",
          data: trainCountY,
          barWidth: "35%", //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: "#27d08a",
              opacity: 1,
              barBorderRadius: 5,
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

function echarts_4() {
  var myChart = echarts.init(document.getElementById("echart4"));
  var  url = 'http://192.168.0.103:6002'
    $.ajax({
      url: url + '/api/daping/statistic/dashboard', // 替换为你的接口URL
      type: 'POST', // 或者 'POST'，取决于接口要求
      success: function (data) {
        // 假设返回的数据是数组，我们遍历它并添加到页面上的容器中
        console.log(data)
        data.response.active.forEach(item=>{
          activeX.push(item.dateStr)
          activeY.push(item.userCount)
        })
        console.log(activeX)
        myChart.setOption({
          xAxis:[{
            data:activeX
          }],
          series: [{
            data: activeY,
          }]
        })
      },
      error: function (xhr, status, error) {
        // 处理错误情况
        console.error("An error occurred: " + status + "\nError: " + error);
      }
    });
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: "#dddc6b",
          },
        },
      },
      legend: {
        top: "0%",
        data: ["登录人数"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      grid: {
        left: "10",
        top: "30",
        right: "10",
        bottom: "10",
        containLabel: true,
      },

      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },

          data: activeX,
        },
        {
          axisPointer: { show: false },
          axisLine: { show: false },
          position: "bottom",
          offset: 20,
        },
      ],

      yAxis: [
        {
          type: "value",
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },

          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          name: "登录人数",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 10,
          showSymbol: true,
          lineStyle: {
            normal: {
              color: "#0184d5",
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          itemStyle: {
            normal: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
          },
          data: activeY,
        }
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
     window.addEventListener("resize", function () {
       myChart.resize();
     });
  }
  function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart5"));
    var  url = 'http://192.168.0.103:6002'
    $.ajax({
      url: url + '/api/daping/statistic/dashboard', // 替换为你的接口URL
      type: 'POST', // 或者 'POST'，取决于接口要求
      success: function (data) {
        // 假设返回的数据是数组，我们遍历它并添加到页面上的容器中
        console.log(data)
        if(data.response.fenxiFangshi.线上 != null){
          data.response.fenxiFangshi.线上.forEach(item=>{
            fenxiFangshiY.push(item.trainNum)
          })
        }
        if(data.response.fenxiFangshi.线下 != null){
          data.response.fenxiFangshi.线下.forEach(item=>{
            fenxiFangshiX.push(item.trainNum)
          })
        }
        data.response.fenxiGroup.forEach(item=>{
          fenxiGroupX.push(item.trainType)
          fenxiGroupY.push(item.trainNum)
        })
        myChart.setOption({
          xAxis:[{
            data:fenxiGroupX
          }],
          series:[{
            name: '线上培训次数',
            data:fenxiFangshiY
        },{
            name: '线下培训次数',
            data:fenxiFangshiX
        },{
            name: '考试次数',
            data:fenxiGroupY
        }]
        })
      },
      error: function (xhr, status, error) {
        // 处理错误情况
        console.error("An error occurred: " + status + "\nError: " + error);
      }
    });
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: "#dddc6b",
          },
        },
      },
      legend: {
        top: "0%",
        data: ["线上培训次数","线下培训次数","考试次数"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      grid: {
        left: "10",
        top: "30",
        right: "10",
        bottom: "10",
        containLabel: true,
      },

      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },

          data: fenxiFangshiY,
        },
        {
          axisPointer: { show: false },
          axisLine: { show: false },
          position: "bottom",
          offset: 20,
        },
      ],

      yAxis: [
        {
          type: "value",
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },

          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          name: "线上培训次数",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "#0184d5",
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          itemStyle: {
            normal: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
          },
          data: fenxiFangshiY,
        },
        {
          name: "线下培训次数",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "#00d887",
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0, 216, 135, 0.4)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 216, 135, 0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          itemStyle: {
            normal: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
          },
          data: fenxiFangshiY,
        },
        {
          name: "考试次数",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "#FF0000",
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(255, 0, 0, 0.4)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(255, 0, 0, 0.2)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          itemStyle: {
            normal: {
              color: "#ff0000",
              borderColor: "rgba(255, 0, 0, .1)",
              borderWidth: 12,
            },
          },
          data: fenxiGroupY,
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
  function echarts_31() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("fb1"));
    var  url = 'http://192.168.0.103:6002'
    $.ajax({
      url: url + '/api/daping/statistic/dashboard', // 替换为你的接口URL
      type: 'POST', // 或者 'POST'，取决于接口要求
      success: function (data) {
        // 假设返回的数据是数组，我们遍历它并添加到页面上的容器中
        var passValue = []
        var passName = []
        data.response.pass.forEach(item=>{
          passValue.push(item.videoNum)
          passName.push(item.videoName)
        })
        myChart.setOption({  
          series:[{
            data:[{
              value:passValue , name: passName
            }]
        }]
        })
      },
      error: function (xhr, status, error) {
        // 处理错误情况
        console.error("An error occurred: " + status + "\nError: " + error);
      }
    });
    option = {
      title: [
        {
          text: "培训合格率",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: "18",
          },
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position: function (p) {
          //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        },
      },
      legend: {
        top: "80%",
        itemWidth: 20,
        itemHeight: 20,
        data: ["合格", "不合格"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "16",
        },
      },
      series: [
        {
          name: "年龄分布",
          type: "pie",
          center: ["50%", "42%"],
          radius: ["40%", "60%"],
          color: [
            "#065aab",
            "#066eab",
            "#0682ab",
            "#0696ab",
            "#06a0ab",
            "#06b4ab",
            "#06c8ab",
            "#06dcab",
            "#06f0ab",
          ],
          label: { show: true },
          labelLine: { show: true},
          data: [
            { value: 6, name: "合格" },
            { value: 4, name: "不合格" },
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
});
